<template>
  <master :title="title">
     <!-- Author: guyang -->
    <listpage ref="listpage"></listpage>
    <!-- 派遣 -->
    <modal :confirm-box-style="contentStyle" title="" :visible="paiqian" @success="submitPaiQian" @fail="closePaiQian">
      <div class="selectArea row">
        <span>派遣对象：</span>
        <el-select v-model="value" filterable placeholder="请选择" z-index="10000">
          <el-option z-index="9999" v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="inputArea row">
        <span>派遣意见：</span>
        <el-input class="flex" type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">
        </el-input>
      </div>
    </modal>
    <!-- 详情 -->
    <modal :confirm-box-style="contentStyle" :show-cancel="false" title="" :visible="detail" @success="submitDetail"
      @fail="closeDetail">
      <div class="d0 column">
        <div class="d1 row">
          <div class="d11 column flex">
            <div class="d111">申请单位：环卫处</div>
            <div class="d112">申请人：张三</div>
            <div class="d113">市容环境类-垃圾污染</div>
            <div class="d114">申请时间：2022-09-09 18:00:00</div>
          </div>
          <div class="d12">
            <el-image style="width: 200px; height: 200px"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill"></el-image>
          </div>
        </div>
        <div class="d2 row mtop20">
          <span>问题描述：</span>
          <!-- <el-input class="flex" type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">
          </el-input> -->
          <span
            class="flex">问题很严重，下水道堵了，路面积水问题很严重路面积水问题很严重，下水道堵了，路面积水问题很严重，下水道堵了，路面积水问题很严重，下水道堵了，路面积水问题很严重，下水道堵了，路面积水问题很严重，下水道堵了，路面积水问题很严重，下水道堵了，路面积水问题很严重，下水道堵了，路面积水</span>

        </div>
        <div class="d3 mtop20">
          地图位置：重庆市巴南区财经学院
        </div>
        <div class="d4 mtop20">
          地图
        </div>
      </div>
    </modal>
  </master>
</template>

<script type="text/javascript">
  (function (G) {
    var _this = null;
    G.vue({
      "usingComponents": {//引入组件
        "master": "/components/Master/Master",//母版组件
        "modal": "/components/Modal/Modal",
        "listpage": "/components/List/Page/Page"//通用列表组件
      },
      "enablePullDownRefresh": true
    }, G.modelList({//配置listpage组件
      modelName: 'g_case',//entity名称
      title: '案件管理',
      listPage(list, query) {//query为前一个页面传过来的参数
        list.getUrl = '/api/model/g_case';//列表请求API
        list.searchKey = 'id,source,type';//搜索字段，来源于列表数据模型
        list.textssearchBtn = '查询';
        list.canCheck = false //取消选中按钮 同时取消批量删除
        //list.canBack = true //添加返回上一页按钮
        //list.actions.add = false //取消新增按钮
        list.actions.delet = undefined //取消行删除按钮
        list.actions.edit = undefined //取消行修改按钮
        list.models = {// 列表数据模型，默认使用后台返回对应的模型
          id: { label: '编号' },
          description: list.models.description,
          urgency: list.models.urgency,
          source: list.models.source,
          applyType: list.models.applyType,
          surplusTime: list.models.surplusTime,
          type: list.models.type,
        }
        list.addDataChange = function (item) { // 判断applyType=='1'显示派遣，另外两个按钮隐藏
          if (item.applyType == '1') {
            item.dis_paiqian = true
          } else if (item.applyType == '5') {
            item.dis_accept = true
            item.dis_reject = true
            item.dis_paiqian = true
          } else {
            item.dis_accept = true
            item.dis_reject = true
            item.dis_paiqian = false
          }
        }
        list.actions.reject = {//定义操作按钮，默认存在修改和删除
          name: '拒绝',//按钮名称
          action(event) {//点击回调
            let item = event.detail//数据
            console.log('------item:', item)
            //推送逻辑
            this.$confirm('该案件将被退回给处理人员，确认操作吗？', '拒绝提醒', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '退回成功!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });
            });
          }
        }
        list.actions.accept = {//定义操作按钮，默认存在修改和删除
          name: '同意',//按钮名称
          action(event) {//点击回调
            let item = event.detail//数据
            console.log('------item:', item)
            //推送逻辑
            this.$confirm('该案件将移入待处理，确认操作吗？', '同意提醒', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '处理成功!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });
            });
          }
        }
        list.actions.paiqian = {//定义操作按钮，默认存在修改和删除
          name: '派遣',//按钮名称
          action(event) {//点击回调
            let item = event.detail//数据
            console.log("传进来的数据：", item)
            _this.setData({ paiqian: true })
          }
        }
        list.actions.liucheng = {//定义操作按钮，默认存在修改和删除
          name: '流程',//按钮名称
          action(event) {//点击回调
            let item = event.detail//数据
            console.log(item)
            //推送逻辑
            G.alert('我是确定弹框').then(() => {
              //弹出后逻辑
              G.confirm('我是提示弹框').then(() => {
                //弹出后逻辑
                console.log('用户选择了确定')
              }).catch(() => {
                console.log('用户选择了取消')
              })
            })
          }
        }
        list.actions.detail = {//定义操作按钮，默认存在修改和删除
          name: '详情',//按钮名称
          action(event) {//点击回调
            let item = event.detail//数据
            console.log("详情：", item)
            _this.setData({ detail: true })
            G.get('/api/models/user', { id: item.applicant,sql:'selectCasePage' }).then(res => {
              if (!res.errorMsg) {
                ///获取数据成功
                console.log('----res-',res.data);
              }
            })

          }
        }
      },
      modeleditquery(edit, event, query) {//编辑页面 edit对象，event事件，query前一个页面传过来的参数
        console.log('-----edit-', edit)
        // console.log('-----event-', event)
        // console.log('-----query-', query)
        if (event.type == 'add') { //判断如果是新增的页面，id不用编辑，可以把id设为undefined，或者id的type设为undefined
          edit.models.id.type = undefined
        }
        // edit.models = {//编辑数据模型，默认使用后台返回的对应模型
        //   title:{
        //     label:'标题',
        //     type:'input'
        //   }
        // }
        //edit.readOnly = true //设置页面只读
        //edit.meth = 'PUT' //请求方式
        //edit.url = '/api/model/article' //请求地址
      }
    }, {
      data: {
        // 详情参数
        detail: false,
        // 派遣参数
        contentStyle: '',
        paiqian: false,

        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        textarea: ''
      },
      methods: {
        // 派遣弹窗函数
        submitPaiQian() {
          this.paiqian = false
        },
        closePaiQian() {
          this.paiqian = false
        },
        // 详情弹窗函数
        submitDetail() {
          this.detail = false
        },
        closeDetail() {
          this.detail = false
        }
      },
      mounted: function (query) {
        _this = this
      }
    }));
  })(Y)
</script>
<style scoped>
  .inputArea {
    margin-top: 20px;
  }

  .row {
    display: flex;
    flex-direction: row;
  }

  .column {
    display: flex;
    flex-direction: column;
  }

  .flex {
    flex: 1;
  }

  .d11 {
    justify-content: space-between;
  }

  .mtop20 {
    margin-top: 20px;
  }
</style>